<template>
    <div id="map">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</template>

<script>
    import {Map, View} from "ol";
    import {OSM} from "ol/source";
    import {Tile} from "ol/layer";
    import {Projection} from "ol/proj";
    import {register} from "ol/proj/proj4";
    import * as Proj from "proj4";

    export default {
        name: "ProjectTransform",
        data() {
            return {};
        },
        mounted() {

            console.log(Proj)
            //使用proj4.defs()定义投影
            //国家2000的大地坐标系
            Proj.default.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
            //定义3395平面坐标系
            Proj.default.defs("EPSG:3395", "+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
            console.log(Proj);
            //使proj4中定义的投影在OpenLayers中可用。
            register(Proj.default);

            //创建"EPSG:4490"的Projection实例，Openlayers将可以从Proj4js中获取转换函数。
            var cgcs2000 = new Projection({
                code: "EPSG:4490", //EPSG code
                extent: [-180, -90, 180, 90], //投影范围
                worldExtent: [-180, -90, 180, 90],//投影的全球范围
                units: "degrees", //Projection units: `'degrees'`, `'ft'`, `'m'`, `'pixels'`, `'tile-pixels'` or `'us-ft'.
            });

            //初始化地图
            this.leftMap = new Map({
                target: "left", //指定挂载dom，注意必须是id
                layers: [
                    new Tile({
                        source: new OSM(), //加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影 84参考系的投影code名称
                    zoom: 12, //缩放到的级别
                }),
            });
            var rightMap = new Map({
                layers: [
                    new Tile({
                        source: new OSM(), //加载OpenStreetMap
                    }),
                ],
                target: "right", //地图容器div的ID
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    //projection: cgcs2000, //指定投影对象
                    //projection: "EPSG:4490", //指定投影EPSG的名称
                    projection: "EPSG:3857", //指定投影
                    zoom: 12, //缩放到的级别
                }),
            });
        },
    };
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

    #left {
        width: 50%;
        height: 100%;
    }

    #right {
        width: 50%;
        height: 100%;
    }
</style>